'use client';

import React, { useEffect } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { usePathname } from 'next/navigation';
import {
  LayoutDashboard,
  ListTodo,
  BrainCircuit,
  Database,
  BarChart4,
  Settings,
  Menu,
  GitBranch,
  Activity,
  Upload,
  CalendarClock,
} from 'lucide-react';

const navItems = [
  { href: '/dashboard', label: '总览仪表盘', icon: LayoutDashboard },
  // { href: '/large-model', label: '大模型开放进化', icon: Brain },
  { href: '/collaboration', label: '协同进化配置', icon: GitBranch },
  { href: '/scheduling', label: '协同进化调度', icon: CalendarClock },
  // { href: '/cloud-edge', label: '云边协同进化', icon: Cloud },
  { href: '/tasks', label: '进化任务管理', icon: ListTodo },
  { href: '/models', label: '进化模型管理', icon: BrainCircuit },
  { href: '/samples', label: '协同样本归集', icon: Database },
  { href: '/model-images', label: '模型镜像传输', icon: Upload },
  { href: '/monitoring', label: '训练监控', icon: Activity },
  { href: '/evaluations', label: '遗忘评估管理', icon: BarChart4 },
  // { href: '/distributed', label: '分布式进化', icon: Shield },
  { href: '/settings', label: '系统设置', icon: Settings },
];

interface SidebarProps {
  isOpen: boolean;
  onToggle: () => void;
  onClose: () => void;
}

export default function Sidebar({ isOpen, onClose }: SidebarProps) {
  const pathname = usePathname();

  // 在路径变化时关闭移动端侧边栏
  useEffect(() => {
    onClose();
  }, [pathname, onClose]);

  // 点击遮罩层关闭侧边栏
  const handleOverlayClick = () => {
    onClose();
  };

  const isActive = (href: string) => pathname === href;

  return (
    <>
      {/* 移动端遮罩层 */}
      {isOpen && (
        <div 
          className="fixed inset-0 z-30 bg-black bg-opacity-50 lg:hidden"
          onClick={handleOverlayClick}
        />
      )}
      
      {/* 侧边栏 */}
      <aside className={`fixed left-0 top-0 z-40 h-screen w-64 border-r border-gray-200 bg-white shadow-lg transition-transform duration-300 ease-in-out lg:translate-x-0 ${
        isOpen ? 'translate-x-0' : '-translate-x-full'
      }`}>
        {/* 头部 Logo */}
        <div className="bg-white text-gray-800 border-b border-gray-200">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex flex-col items-center w-full">
              {/* Logo 区域 - 铺满容器 */}
              <div className="w-full h-16 relative">
                <Image
                  src="/logo.png"
                  alt="国家电网 Logo"
                  fill
                  className="object-contain"
                />
              </div>
            </Link>
          </div>
        </div>
        
        {/* 导航菜单 */}
        <div className="h-full overflow-y-auto px-3 py-4 pb-20">
          <ul className="space-y-1 font-medium">
            {navItems.map((item) => (
              <li key={item.href}>
                <Link
                  href={item.href}
                  className={`flex items-center rounded-lg p-3 transition-colors duration-200 ${
                    isActive(item.href) 
                      ? 'bg-primary-500 text-white font-medium border-primary-500' 
                      : 'text-gray-700 hover:bg-primary-50 hover:text-primary-500'
                  }`}
                >
                  <item.icon className="h-5 w-5 mr-3 flex-shrink-0" />
                  <span className="text-sm">{item.label}</span>
                </Link>
              </li>
            ))}
          </ul>
        </div>
      </aside>
    </>
  );
}

// 导出移动端菜单按钮组件
export function MobileMenuButton({ onClick }: { onClick: () => void }) {
  return (
    <button
      onClick={onClick}
      className="p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500 lg:hidden"
    >
      <Menu className="h-6 w-6" />
    </button>
  );
} 